<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        自定义指令
        当现有的指令无法满足自己的使用需求时，可以创建自定义指令
        全局自定义指令： 即加在vue构造函数中，全篇所有的vue实例都可以访问的到
        局部自定义指令：即加在单个实例对象中，只有在该实例对象中有效
        一个指令对象，常用的钩子函数有两个：bind、inserted

        bind、inserted的区别：
        Dom插入都会调用，bind在inserted之前
        bind是在Dom树绘制之前调用，inserted是在Dom树绘制之后调用
     -->
     <div class="box">
        <h1>{{info}}</h1>
        <button v-on:click="upper">点击转换成大写 </button>
        <!-- 用自定义指令实现 转化成大写 -->
        <div v-upper="info"></div>
        <div v-lower="lowertest"></div>
        <div v-aa="quanju"></div>
     </div>
     <script>
        //全局自定义指令的名字aa
        Vue.directive('aa',{
            inserted(el,binding,vnode){
                el.innerText = binding.value.toUpperCase();
            }
        })
        let vm = new Vue({
            el:'.box',
            data:{
                info:'nihao',
                lowertest:'HELLO',
                quanju:'hello'
            },
            methods:{
                upper(){
                    this.info = this.info.toUpperCase();
                }
            },
            //设置自定义指令
            directives:{
                //自定义指令的名字
                upper:{
                    //自定义指令对象的钩子函数
                    bind(el,binding,vnode){
                        //el指绑定的元素
                        //binding.value 是指令的绑定的值 即info的值
                        el.innerText = binding.value.toUpperCase();
                    }
                },
                lower:{
                    inserted(el,binding,vnode){
                        el.innerText = binding.value.toLowerCase();
                    }
                }                                    
            }
        })
     </script>
</body>
</html>